<template>
  资讯
  <el-button type="primary" @click="addzixun">新增资讯</el-button>
  <!--  <div style="display:flex">-->
  <!--  <el-input v-model="input" placeholder="请输入链接" style="width:80%"></el-input><el-button type="primary" icon="el-icon-search" @click="souso">搜索</el-button>-->
  <!--  <div style="float:right;margin-left:5%">-->
  <!--  &nbsp;&nbsp;<el-switch v-model="xs" active-text="显示" inactive-text="不显示"></el-switch>-->
  <!--  </div>-->
  <!--  </div>-->
  <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      class="quanxuan"
  >全选
  </el-checkbox
  >
  <el-row class="r1">
    <el-button type="success" round :disabled="dis" @click="xianshi"
    >显示
    </el-button
    >
    <el-button type="info" round :disabled="dis" @click="buxianshi"
    >不显示
    </el-button
    >
  </el-row>

  <div>
    <div v-for="i in list" :key="i.id">
      <div style="display: flex">
        <el-checkbox
            label=" "
            :indeterminate="isIndeterminate"
            v-model="i.checked"
            @change="chg"
        ></el-checkbox>
        <div class="d2">
          <font class="ft2">{{ i.ri }}</font>
          <font class="ft3">{{ i.yue }}</font>
        </div>
        <img :src="i.thumb_url" class="tu3" @click="dianji(i.url)"/>
        <div class="d3">
          <font class="ft4">
            {{ i.title }}
          </font>
          <p class="p1">
            {{ i.digest }}
          </p>
        </div>
        <div class="d4">
          <el-result
              v-if="i.isshow == 1"
              icon="success"
              title="显示的状态"
          ></el-result>
          <el-result
              v-if="i.isshow == 0"
              icon="warning"
              title="不显示的状态"
          ></el-result>
        </div>
        <div class="d5">
          <el-button size="mini" @click="editzixun(i.id)"
          >Edit
          </el-button
          >
          <el-popconfirm title="确定删除?" @confirm="delzixun(i.id)">
            <template #reference>
              <el-button size="mini"
                         type="danger">Delete</el-button>
            </template>
          </el-popconfirm>
        </div>
      </div>

    </div>
    <hr class="h1"/>

  </div>
  <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="changePage"
      v-model:currentPage="page"
  >
  </el-pagination>
</template>
<script>
import {ElMessage} from "element-plus";

export default {
  name: "zixun",
  props: ["jwttoken"],
  data() {
    return {
      list: [],
      page: 1,
      checkAll: false,
      total: 0,
      loading: true,
      dis: true,
      input: '',
      xs: true
      //   isIndeterminate: true
    };
  },
  created: function () {
    this.xsstat(this.page);
  },
  watch: {
    xs(newval) {
      console.log(newval)
      this.xsstat(this.page)
    }
  },
  methods: {
    // ggxs:function(){
    //   if(this.xs==true){
    //     this.xs=false
    //   }else{
    //     this.xs=true
    //   }
    // },
    getzixunlist: function (page) {
      let that = this;
      this.$jquery.ajax({
        async: false,
        type: "GET",
        dataType: "json",
        url: this.$baseurl + "adminGetWxSucaiList/10/" + page,
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            that.list = rtn.data.list;
            that.total = rtn.data.count;
            that.loading = false;
          }
        },
      });
    },
    changePage: function (page) {
      this.xsstat(page);
    },
    dianji: function (url) {
      location.href = url;
    },
    handleCheckAllChange: function () {
      if (this.checkAll) {
        this.dis = false;
        for (let i in this.list) {
          this.list[i].checked = true;
        }
      } else {
        this.dis = true;
        for (let i in this.list) {
          this.list[i].checked = false;
        }
      }
    },
    chg: function () {
      let flag = 0;
      for (let i in this.list) {
        if (this.list[i].checked == true) {
          flag = 1;
        }
      }
      if (flag == 1) {
        this.dis = false;
      } else {
        this.dis = true;
      }
    },
    changeshow: function (isshow) {
      let that = this;
      let ids = "";
      for (let i in this.list) {
        if (this.list[i].checked == true) {
          ids += this.list[i].id + ",";
        }
      }
      this.$jquery.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        data: {
          isshow: isshow,
          ids: ids,
        },
        url: this.$baseurl + "changeZixunStatus/",
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            ElMessage.success({
              message: "更改状态成功",
              type: "success",
            });
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else {
            ElMessage.error("更改状态失败");
          }
        },
      });
    },
    xianshi: function () {
      this.changeshow(1);
    },
    buxianshi: function () {
      this.changeshow(0);
    },
    souso: function () {
      if (this.input == '') {
        ElMessage.error("链接不能为空");
        return;
      } else {
        let that = this
        this.$jquery.ajax({
          async: false,
          type: "POST",
          dataType: "json",
          data: {
            url: this.input,
          },
          url: this.$baseurl + "getWxSearchList/",
          beforeSend: function (request) {
            request.setRequestHeader("Authorization", that.jwttoken);
          },
          success: function (rtn) {
            if (rtn.code == -5) {
              that.$emit("loginstate1", -1);
            }
            if (rtn.code == 1) {
              that.list = rtn.data.list;
              that.total = rtn.data.count;
              that.loading = false;
              // setTimeout(() => {
              //   location.reload();
              // }, 1000);
            } else {
              ElMessage.error("暂无数据");
            }
          },
        });
      }
    },
    xsstat: function (page) {
      let isshow = 1
      if (this.xs == true) {
        isshow = 1
      } else {
        isshow = 0
      }
      let that = this
      this.$jquery.ajax({
        async: false,
        type: "GET",
        dataType: "json",
        url: this.$baseurl + "getWxSucaiListByStatus/10/" + page + "/" + isshow,
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            that.list = rtn.data.list;
            that.total = rtn.data.count;
            that.loading = false;
          }
        },
      });
    },
    addzixun: function () {
      this.$router.push("/addzixun")
    },
    editzixun:function (id){
      this.$router.push({
        path:'editzixun',query: {id:id}
      })
    },
    delzixun:function (id){
      let that=this
      this.$jquery.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        data: {
          id: id,
        },
        url: this.$baseurl + "deleteZixun/",
        beforeSend: function (request) {
          request.setRequestHeader("Authorization", that.jwttoken);
        },
        success: function (rtn) {
          if (rtn.code == -5) {
            that.$emit("loginstate1", -1);
          }
          if (rtn.code == 1) {
            ElMessage.success({
              message: "删除成功",
              type: "success",
            });
            setTimeout(() => {
              location.reload();
            }, 1000);
          } else {
            ElMessage.error("删除失败");
          }
        },
      });
    }
  },
};
</script>
<style scoped>
.d2 {
  margin-top: 5%;
  margin-left: 5%;
}

.ft2 {
  display: block;
  font-family: "楷体";
  /* margin-top: 10%;
    margin-left: 10%; */
}

.ft3 {
  display: block;
  font-family: "楷体";
}

.tu3 {
  width: 30%;
  /*height: 100px;*/
  margin-top: 5%;
  margin-left: 3%;
}

.d3 {
  width: 40%;
  height: 100%;
  margin-top: 5%;
  margin-left: 5%;
}

.ft4 {
  font-size: 11px;
}

.p1 {
  font-size: 9px;
  color: #888788;
}

.quanxuan {
  float: left;
  display: block;

  /* margin-bottom: 15%; */
}

.r1 {
  display: block;
  float: right;
}
.d5{
  margin-top: 50px;
}
</style>
